<template>
    <h1>用户借款页面</h1>

    <table>
        <tr>
            <td>借款名称</td>
            <td>
                {{ Show.BM_Name }}
            </td>
        </tr>

        <tr>
            <td>最高金额</td>
            <td>
                {{ Show.BM_Money }}
            </td>
        </tr>

        <tr>
            <td>利率</td>
            <td>
                {{ Show.BMI_Interest }}
            </td>
        </tr>

        <tr>
            <td>借款金额</td>
            <td>
                <input type="text" v-model="money" @change="GetMoney" >
            </td>
        </tr>

        <tr>
            <td>每月还款金额</td>
            <td>
                {{ Number(NewMoney).toFixed(2)  }}CNY
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="button" value="确认借款" @click="AddUserBorrow" />
            </td>
        </tr>

    </table>

</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter} from 'vue-router'; 
import {useUserStore} from '../../store/index.ts'

const route = useRoute();
const router = useRouter();
const useStore = useUserStore();

const Show = ref ({
    BM_Name:'',
    BM_Money:'',
    BM_Year:'',
    BMI_Interest:'',
})

const money = ref('');
const NewMoney = ref('');

console.log(route.params.Id);

console.log(useStore.Uid);

onMounted(() => {
    SearBorrowData();
})

const SearBorrowData = ()=>{
    axios({
        url:'http://localhost:56707/api/Borrow/SearBorrowData',
        method:'get',
        params:{
            Id:route.params.Id
        }
    })
    .then(res => {
        console.log(res.data);
        Show.value = res.data[0];
    })
    .catch(err => {
        console.log(err);
    })
}

const GetMoney = ()=>{
    axios({
        url:'http://localhost:56707/api/Borrow/GetUserPayment',
        method:'get',
        params:{
            UMoney:money.value,
            Invest:Show.value.BMI_Interest,
            Year:Show.value.BM_Year,
        }
    })
    .then(res => {
        console.log(res.data);
        NewMoney.value = res.data;
    })
    .catch(err => {
        console.log(err);
    })
}

const AddUserBorrow = ()=>{
    axios({
        url:'http://localhost:56707/api/Borrow/AddUserBorrow',
        method:'post',
        data:{
            U_Id:useStore.Uid,
            BM_Id:route.params.Id,
            UBM_Money:money.value,
        }
    })
    .then(res=>{
        if(res.data>0){
            alert('用户借款成功');
            router.push('/BorrowShow')
        }
        else{
            alert('用户借款失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}



</script>
